<template>
	<view>
		<view class="item" v-for="item in 4">
			<view class="name">张三<span class="mobile">1111111</span></view>
			<view class="address">青岛市市南区广西路60号</view>
			<view class="border" style="margin-top: 30rpx;"></view>
			<view class="row-between-center" style="margin-top: 30rpx;">
				<view class="row-center" >
					<!-- <image src="/static/images/radio_y.png" class="radio" @click="change"></image> -->
					<image src="/static/images/radio_n.png" class="radio" @click="change"></image>
					<view class="default">默认地址</view>
				</view>
				<view class="row-center" >
					<view class="btn row-center" style="margin-right: 20rpx;">删除</view>
					<view class="btn row-center">编辑</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			change(){
				
			}
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.item{
		margin: 20rpx;
		border-radius: 12rpx;
		background: #FFF;
		padding: 30rpx 20rpx;
		.name{
			color:  #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx; /* 157.143% */
		}
		.border{
			border-bottom: 1rpx dashed  #E4E8FC;
		}
		.radio{
			width: 24rpx;
			height: 24rpx;
		}
		.mobile{
			margin-left: 20rpx;
			color: #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.address{
			margin-top: 20rpx;
			color:  #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.default{
			margin-left: 10rpx;
			color: #676C7F;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.btn{
			width: 88rpx;
			height: 44rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
			background: #F2F3F8;
			
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
	}
</style>
